<template>
    <div>
        <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/layout/choushangguanli/quanjushang' }">全局赏列表</el-breadcrumb-item>
        <el-breadcrumb-item><a>添加全局赏</a></el-breadcrumb-item>
        </el-breadcrumb>
        <el-form :model="basicInfo" status-icon ref="ruleForm" label-width="130px" class="demo-ruleForm">
            <el-form-item label="盒子名称" prop="name">
                <el-input type="text" placeholder="请输入盒子名称" v-model="basicInfo.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="玩法模式">
                 <el-checkbox v-model="basicInfo.kc" :disabled='disabled' true-label=1 false-label="">空车赏</el-checkbox>
                 <el-checkbox v-model="basicInfo.ccs" :disabled='disabled' true-label=1 false-label="">串串赏</el-checkbox>
            </el-form-item>
            <el-form-item label="盒子金额">
                <el-input type="text" placeholder="请输入盲盒金额" v-model="basicInfo.price" autocomplete="off"></el-input>
            </el-form-item> 
            <el-form-item label="盒子库存（套）">
                <el-input type="text" placeholder="请输入箱子数量" v-model="basicInfo.game_num" autocomplete="off"></el-input>
            </el-form-item> 
            <el-form-item label="是否隐藏" prop="pass">
                <template>
                    <el-radio v-model="hide" label="是">是</el-radio>
                    <el-radio v-model="hide" label="否">否</el-radio>
                </template>
            </el-form-item>
            <el-form-item label="盒子金额/积分" prop="pass">
                <el-input type="text" placeholder="请输入盲盒金额" v-model="basicInfo.pass" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="排序" prop="pass">
                <el-input type="text" v-model="basicInfo.order" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="限购数量" prop="pass">
                <el-input type="text" v-model="basicInfo.user_limit" autocomplete="off"></el-input>
            </el-form-item>
            <!-- <el-form-item label="霸主模式时间" prop="pass">
                <el-input type="text" v-model="basicInfo.pass" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="全收数量" prop="pass">
                <el-input type="text" v-model="basicInfo.pass" autocomplete="off"></el-input>
            </el-form-item> -->
            <el-form-item label="上传盒子图片">
                <el-upload action="" list-type="picture-card" :http-request="handlePictureCardPreview" ref="upload"
                    :on-change="uploadImg" :on-preview="handlePictureCardPreview" :before-upload="beforeAvatarUpload"
                    >
                    <img class="el_upload_img" v-if="basicInfo.cover_url" :src="basicInfo.cover_url">
                    <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="basicInfo.cover_url" alt="" />
                </el-dialog>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submit">提交</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import quanju from '../../../../api/jurisdiction'
export default {
    data() {
        return {    
            basicInfo: {},
            dialogVisible:false,
            clasify: '',
            advertize: '',
            jifen: '否',
            hide: '否',
            disabled:false,//玩法复选框禁用
        }
    },
    created() {
        this.getEditInfo()
        console.log(this.$route.params.id)
        if(this.$route.params.id){
            this.disabled=true
        }
    },
    methods: {
        getEditInfo() {
            if (this.$route.params.id) {
                quanju.getquanjusingle({ params: { game_uuid: this.$route.params.id } }).then((res) => {
                    console.log(res)
                    this.basicInfo = res.data.data
                    this.basicInfo.price=this.basicInfo.price/100
                })
            }
        },
        submit() {
            // 传参
            console.log('参数',this.basicInfo)
            console.log(this.$route.params.id)
            if (!this.$route.params.id) {
                console.log(1)
                if (this.basicInfo.cover_url) {
                    quanju.postquanjugame({
                        name: this.basicInfo.name,
                        cover_url: this.basicInfo.cover_url,
                        user_limit: this.basicInfo.user_limit - 0,
                        price: this.basicInfo.price *100,
                        game_num:this.basicInfo.game_num - 0,
                        kc:this.basicInfo.kc,
                        ccs:this.basicInfo.ccs
                    }).then((res) => {
                        if (res.status == 201) {
                            this.$message.success("创建成功")
                            this.$router.push("/layout/choushangguanli/quanjushang")
                        }
                    }).catch((error) => {
                        // this.$message.warning('该商品已存在')
                        console.log(error)
                    })
                } else {
                    this.$message.warning("图片上传中")
                }
            } else {
                quanju.putquanjusingle({
                    name: this.basicInfo.name,
                    cover_url: this.basicInfo.cover_url,
                    user_limit: this.basicInfo.user_limit - 0,
                    price: this.basicInfo.price *100,
                    game_num:this.basicInfo.game_num - 0,
                    game_uuid: this.$store.state.quanju_update_uuid,    
                }).then((res) => {
                    this.$message.success("修改成功")
                    this.$router.push("/layout/choushangguanli/quanjushang")
                    console.log('修改111',res)
                })
            }
        },
        uploadImg(upFile) {
            console.log('upfile',upFile)
            let file = upFile.raw
            let newName = file.name.split('.')
            let num = crypto.randomUUID()
            let path = `houtaiguanli/quanjushang/${num}.${newName[newName.length - 1]}`
            quanju.uploadImg({ "path": path }).then((res) => {
                console.log('传path调用接口',res)
                let result = res.data
                const data = new FormData();
                data.append('key', path);
                data.append('Signature', result.authorization);
                data.append('x-cos-security-token', result.token);
                data.append('x-cos-meta-fileid', result.cos_file_id);
                data.append('file', file, path);
                console.log(res)
                quanju.generalAPI(result.url, data).then((a) => {
                    quanju.downloadImg({
                        file_list: [
                            {
                                fileid: res.data.file_id,
                                max_age: 0
                            }
                        ]
                    }).then((res) => {
                        let yunurl = res.data.file_list[0].download_url
                        this.basicInfo.cover_url = yunurl
                        this.$message.success("上传成功")
                        console.log('url',this.basicInfo.cover_url)
                    })
                })
            })
        },
        handleAvatarSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {
            
        },
        handlePictureCardPreview(file) {
        },
    }
}
</script>

<style lang="less" scoped>
.el-input {
    width: 400px;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.el_upload_img{
    width: 170px !important;
    height: 170px !important;
}
.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
.el-breadcrumb{
    margin-bottom:20px;
}
</style>